<template>
  <div>
    <div class="position" style="color: white;">素材管理</div>
    <div id="log" style="color: white; font-size:30px;"></div>
    <div class="images">
      <div v-for="(item, index) in srcList" :key="index" class="image-middle">  
        <el-card shadow="hover" :body-style="{ padding: '10px' }"> 
        <el-popover trigger="manual"> 
        <el-image :src="srcList[index]" :fit="fits"
        slot="reference" class="pic" :preview-src-list="srcList"/>
        </el-popover>  
        <div style="text-align:center;padding-top:12px">
        <span>{{"item"}}</span>   
        </div>     
        </el-card>
      </div> 
    </div>
  </div>
</template>
 <style scoped>
 /* “Tissue Search”字体样式 */
 span{
  width: 90px;
 }
.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}
/* 图片总布局，样式 */
.images{
  display: flex;
  margin-top: 20px;
  margin-left: 21px;
  margin-right: 20px;
  flex-wrap: wrap;
}
/* 图片之间 */
.image-middle{
  margin-right: 15px;
  margin-bottom: 15px;
}
/* 单张图片样式 */
.pic{
  height: 160px;

}
 </style>

<script>
import $ from 'jquery'
import { getPics } from '@/api/material'
export default {
  data() {
    return {
      fits:'contain',
      requireChannels: {
        //需要订阅的频道放在这里
        channels: [],
        //发出申请的组件名字放在这里
        component: 'trainInfo'
      },
      srcList: []
    }
  },
  created() {
    this.getPicUrls()
  },
  mounted() {
    // this.getSokcetio()
  },
  methods:{
    
    // getSokcetio: function() {
    //   var i = 0;
    //   this.$socket.emit('Subscribe', 'data')
    //   this.sockets.subscribe('message', data => {
    //     var colors = ['red', 'green', 'yellow', 'pink', 'white']
    //     $('#log').prepend('<p>' + $('<div/>').text(data.data).html() + '</p>');
    //     i++;
    //     $("p").each(function (index, domele) {
    //       $(domele).css("color", colors[index % 5]);
    //     })
    //     if (i > 10) {
    //       $("p:last").remove()
    //     }
    //   })
    //   $("#log").on("mouseover", "p", function (e) {
    //     $(e.target).css("backgroundColor", "black")
    //     e.target.style.cursor = 'pointer'
    //   })
    //   $("#log").on("mouseout", "p", function (e) {
    //     $(e.target).css("backgroundColor", "")
    //   })
    //   $("#log").on("click", "p", function (e) {
    //     if($(e.target).hasClass("details")){
    //         $(e.target).removeClass("details")
    //         $(e.target).children().remove()
    //     }
    //     else{
    //       $(e.target).addClass("details")
    //       $(e.target).append('<span">具体信息<span>')
    //     }
    //   })
    // },
    getPicUrls:function(){
      getPics('60004').then(res => {
        for(var i=0; i<res.length;i++)
        {
          this.srcList.push('http://127.0.0.1:7777/pic_test'+res[i])
        }
    })
    }
  }
}
</script>
